<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin:0px;padding:0px;}
	table{width:500px;height:300px;border-collapse:collapse;}
	table td{text-align:center;}


	</style>
</head>
<body>
	<center>
	<table border='1'>
		<caption><h3>人民艺术家排行榜</h3></caption>
		<tr>
			<td></td>
			<td>序号</td>
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
			<td>操作</td>
		</tr>
		<tr>
			<td><input type="checkbox" name='ids[]'></td>
			<td>1</td>
			<td>王颖楠</td>
			<td>男</td>
			<td>20</td>
			<td><button class='item'>删除</button></td>
		</tr>
		<tr>
			<td><input type="checkbox" name='ids[]'></td>
			<td>2</td>
			<td>王水龙</td>
			<td>男</td>
			<td>29</td>
			<td><button class='item'>删除</button></td>

		</tr>
		<tr>
			<td><input type="checkbox" name='ids[]'></td>
			<td>3</td>
			<td>苍老师</td>
			<td>女</td>
			<td>29</td>
			<td><button class='item'>删除</button></td>

		</tr>
		<tr>
			<td><input type="checkbox" name='ids[]'></td>
			<td>4</td>
			<td>波老师</td>
			<td>女</td>
			<td>28</td>
			<td><button class='item'>删除</button></td>

		</tr>
		<tr>
			<td></td>
			<td><button id='sel'>全选</button></td>
			<td><button id='nosel'>全不选</button></td>
			<td><button id='usel'>反选</button></td>
			<td><button id='del'>批量删除</button></td>
		</tr>
	</table>
	</center>

	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
	<script type="text/javascript">
	//全选
	$('#sel').click(function(){

		$('input[name="ids[]"]').attr('checked','checked');
	})

	//全不选
	$('#nosel').click(function(){

		$('input[name="ids[]"]').removeAttr('checked');
	})

	//反选
	$('#usel').click(function(){

		$(':checkbox').each(function(){
			//获取是否选中
			var che = this.checked;
			//判断
			if(che){
				//如果为真 取假
				$(this).attr('checked',false);
			}else{
				//如果为假 取真
				$(this).attr('checked',true);
			}
		})
		
	})

	//单个删除
	$('.item').click(function(){

		//获取是否选中
		var che = $(this).parent().parent().find('input[name="ids[]"]')[0].checked;

		if(che){

			// $(this).parent().parent().remove();
			$(this).parents('tr').remove();
		}

	})

	//批量删除
	$('#del').click(function(){

		$('input[name="ids[]"]:checked').parents('tr').remove();
	})

	</script>
</body>
</html>